<page-header [title]="'设备列表'">
    <nz-card [nzBordered]="false" class>
      <form nz-form class="search__form" action="search">
        <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
          <div nz-col nzMd="8" nzSm="24">
            <nz-form-item>
              <nz-form-label nzFor="name">设备名称</nz-form-label>
              <nz-form-control>
                <input nz-input [(ngModel)]="q.name" placeholder="请输入设备名称或者Id" [ngModelOptions]="{ standalone: true }" />
              </nz-form-control>
            </nz-form-item>
          </div>
  
          <div nz-col [nzSpan]="24" >
  
  
  
          
  <div style="text-align: right">
            <button nz-button type="submit" [nzType]="'primary'" (click)="getData()">搜索</button>
            <!--<button nz-button type="submit" (click)="getData()" [nzType]="'primary'" [nzLoading]="loading">查询</button>-->
            <button nz-button type="reset" (click)="reset()" class="mx-sm">重置</button>
          </div>  </div>
        </div>
  
        <!--<button nz-button [nzType]="'primary'" [routerLink]="['/manage/authority/roleform']" [queryParams]="{Id:-1}">
        <i nz-icon nzType="plus"></i>
        <span>{{ 'button.new' | translate }}</span>
      </button>-->
      </form>
  
      <div nz-col >
        <button nz-button [nzType]="'primary'" (click)="edit('00000000-0000-0000-0000-000000000000')" acl [acl-ability]="137">
          <i nz-icon nzType="plus"></i>
          <span>{{ 'button.new' | i18n }}</span>
        </button>
        <button nz-button [nzType]="'primary'" (click)="downlink([])" acl [acl-ability]="137">
          <i nz-icon nzType="plus"></i>
          <span>设置规则</span>
        </button>
  
  <div  style="float: right; margin-top: 1rem;">
  显示的列:
    <nz-checkbox-group 
            [(ngModel)]="customColumns"
            name="customColumns"
            (ngModelChange)="st.resetColumns({ emitReload: true })"
          ></nz-checkbox-group>
  </div>
  
  
  
        
      </div>
    </nz-card>
  
    <st multiSort
      [expandAccordion]="true"
      #st
      [columns]="columns"
      [data]="url"
      ps="20"
      [page]="page"
      [req]="req"
      [expand]="expand"
      [res]="res"
      expandAccordion
      (change)="onchange($event)"
    >
      <ng-template #expand let-item let-index="index" let-column="column">
        <nz-card nzTitle="设备属性">
          <nz-table [nzNoResult]="null">
            <thead>
              <tr>
                <td>属性名称</td>
                <td>属性值</td>
                <td>数据侧</td>
                <td>时间</td>      <td>操作</td>
              </tr></thead
            >
            <tbody>
              <tr *ngFor="let _item of cead; let i = index; let odd = odd" [ngClass]="_item.class">
                <td>{{ _item.keyName }}</td>
                <td>{{ _item.value }}</td>
                <td>{{ _item.dataSide }}</td>
                <td>{{ _item.dateTime | date: 'yyyy-MM-dd HH:mm:ss'  }}</td>
                <td>
                  <button
                    nz-button
                    nzType="text"
                    nzDanger
                    nz-popconfirm
                    nzPopconfirmTitle="确认删除属性?"
                    (nzOnConfirm)="removeprop(item,_item)"
                    nzPopconfirmPlacement="topLeft"
                  >
                    删除
                  </button>
                </td>
  
              </tr>
            </tbody>
          </nz-table>
        </nz-card>
  
        <nz-card nzTitle="遥测数据">
          <!-- <nz-tabset> -->
            <!-- <nz-tab [nzTitle]="titleTemplate">
              <ng-template #titleTemplate>
                <i nz-icon nzType="area-chart" nzTheme="outline"></i>
                图表
              </ng-template>
  
              <div nz-row>
                不要直接绑定,会导致界面重绘 
                <div *ngFor="let _item of cetd; let i = index; let odd = odd">
                  <g2-gauge [title]="_item.keyName" [height]="180" [percent]="_item.value" style="width: 200px"></g2-gauge>
                </div>
              </div>
            </nz-tab> -->
            <!-- <nz-tab [nzTitle]="titleTemplate">
              <ng-template #titleTemplate>
                <i nz-icon ></i>
                数据
              </ng-template> -->
  
              <nz-table [nzNoResult]="null">
                <thead>
                  <tr>
                    <td>遥测名称</td>
                    <td>遥测值</td>
                    <td>时间</td>
                  </tr></thead
                >
                <tbody>
                  <tr *ngFor="let _item of cetd; let i = index; let odd = odd" [ngClass]="_item.class">
                    <td>{{ _item.keyName }}</td>
                    <td>{{ _item.value }}</td>
                    <td>{{ _item.dateTime | date: 'yyyy-MM-dd HH:mm:ss'  }}</td>
                  </tr>
                </tbody>
              </nz-table>
            <!-- </nz-tab>
          </nz-tabset> -->
        </nz-card>
  
        <nz-card nzTitle="规则">
          <nz-table [nzNoResult]="null">
            <thead>
              <tr>
                <td>规则名称</td>
                <td>备注</td>
                <td>操作</td>
              </tr></thead
            >
            <tbody>
              <tr *ngFor="let _item of cerd; let i = index; let odd = odd" >
                <td>{{ _item.name }}</td>
                <td>{{ _item.ruleDesc }}</td>
                <td>
                  <button
                    nz-button
                    nzType="text"
                    nzDanger
                    nz-popconfirm
                    nzPopconfirmTitle="确认删除规则?"
                    (nzOnConfirm)="removerule(item, _item)"
                    nzPopconfirmPlacement="topLeft"
                  >
                    删除
                  </button>
                </td>
              </tr></tbody
            >
          </nz-table>
        </nz-card>
  
        <!-- <nz-card nzTitle="操作">
  
  <div nz-row >
  
    <span *ngFor="let _item of cett; let i = index;">
    <button 
                  nz-button
                  nzType="primary"
                  (nzOnConfirm)="executeCommand(item, _item)"
                  nz-popconfirm
                  nzPopconfirmTitle="{{'确认执行'+_item.commandTitle+'?'}}"
                  nzPopconfirmPlacement="topLeft"
                >
                  {{_item.commandTitle}}
                </button></span>
  
  </div>
  
  
        </nz-card> -->
      </ng-template>
    </st>
  </page-header>
  